/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

.spoiler {
  --anim: .4s ease;
  // position: relative; // ! idk what it was for
  background-color: var(--spoiler-background-color);
  
  &-text {
    opacity: 0;
  }

  /* &-draft {
    background-color: var(--spoiler-draft-background-color);
  } */
}

.spoilers-container {
  .custom-emoji-canvas {
    z-index: -1;
  }

  // &.will-change {
  //   .spoiler {
  //     // box-shadow: 0 0 var(--spoiler-background-color);

  //     &-text {
  //       filter: blur(6px);
  //     }
  //   }
  // }

  &.is-spoiler-visible {
    &.animating {
      .spoiler {
        transition: /* box-shadow var(--anim), */ background-color var(--anim);

        &-text {
          transition: opacity var(--anim)/* , filter var(--anim) */;
        }
      }
    }

    &:not(.backwards) {
      .spoiler {
        background-color: transparent;
        // box-shadow: 0 0 30px 30px transparent;
    
        &-text {
          // filter: blur(0);
          opacity: 1;
        }
      }
    }

    // &.backwards {
    //   .spoiler-text {
    //     filter: blur(3px);
    //   }
    // }
  }

  &:not(.is-spoiler-visible) {
    .spoiler {
      cursor: pointer;

      &-text {
        pointer-events: none;
      }
    }
  }
}
